import React from 'react'
import { FileUpload } from '../ui-components'
import style from './style'
import styleFrom from './css/style.form'
import Code from './Code'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as homeAction from '../actions/home.action'
import * as fileAction from '../actions/file.action'

export default 
@connect(({newsFeed, upload}) => ({newsFeed, upload}), dispatch => ({actions: bindActionCreators({...homeAction, ...fileAction}, dispatch)}))
class extends React.Component {
  render() {
    return (
      <div className={style.root}>
        <Code>{'<FileUpload [,button, link] label={..}/>'}</Code>
        <div>
          <FileUpload 
            file='http://avatar-staging.oss-cn-beijing.aliyuncs.com/0ba6ad9c-1107-4b9d-9c55-0afccb673a7b%7C42.34693877551021,10.7421875,30'
            label="点击上传" 
            onChange={onChange}
          />
        </div>
        <div>
          <FileUpload label="上传文档" button onChange={onChange}/>
        </div>
        <div>
          <FileUpload label="上传文档" link onChange={onChange}/>
        </div>
        <div>
          <FileUpload 
            label="点击上传身份证正反面" 
						ratio="1.58"
						size="100"
           	row="3" 
						max="3"
            margin="10" 
            multi 
            onUpload={files => { console.log(files) }}
            onChange={ (file, success) => {
              (() => {
                // 请求上传地址
                this.props.actions.requestFeedImagesUploadUrl(res => {
                  // 上传图片
                  this.props.actions.fileUpload({
                    file: file.file,
                    url: res.data.url,
                    cb: () => {
                      success({
                        id: file.id,
                        uuid: res.data.uuid
                      })
                    }
                  })
                })
              })()
            }}
          />
        </div>
      </div>
    )
  }
}

function onChange(files) {
}
